<template>
<div class="product-list">
  <el-card class="box-card search" shadow="always">
    <div slot="header" class="clearfix">
      <span>条件查询</span>
    </div>
    <div class="search-body">
    <el-row :gutter="10">
     <el-col :span="6">
  <el-input v-model="search.gname"  placeholder="商品名称" class="inp" size="medium"></el-input>
     </el-col>
      <el-col :span="6">
  <el-input  v-model="search.pcode" placeholder="商品编码" class="inp" size="medium"></el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value" placeholder="品牌">
          <el-option
            v-for="item in productlist"
            :key="item.id"
            :label="item.brandName"
            :value="item.brand_id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="value1" placeholder="分类">
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
        </el-select>
      </el-col>
    </el-row>
      <el-row :gutter="10" style="margin-top: 20px">
       <el-col :span="4" :offset="18">
         <el-button type="primary" size="medium" @click="doSearch">查询</el-button>
         <el-button type="default" size="medium" @click="reselt">重置</el-button>

       </el-col>
      </el-row>
    </div>
  </el-card>
<!--  列表页-->
  <el-card class="box-card detail-list">
    <div slot="header" class="clearfix">

  <el-button type="primary" size="small" @click="goAdd">新增</el-button>
    </div>
<!--    tablelist-->
    <div>
      <el-table
        :data="productlist"
        border

        style="width: 100%">
        <el-table-column fixed type="index" label="#" width="50"></el-table-column>
        <el-table-column
          align="center"
          label="商品9"
          fixed
          width="180">
          <template slot-scope="scope">
            <img :src="scope.row.cover_img" alt="" style="width: 60%;">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="商品名称"
          width="180">
        <template slot-scope="scope">
        <div class="text">
          <p class="p1">{{scope.row.gname}}</p>
          <p class="p2">{{scope.row.brandEname}}</p>
          <p class="p2">{{scope.row.descr}}</p>

        </div>
        </template>
        </el-table-column>
        <el-table-column

          width="180"
          label="标签">
        <template slot-scope="scope">
          <div class="switchs" style="display: flex;flex-wrap: wrap;justify-content: center;width: 150px;">
            <el-switch
              v-model="scope.row.isnew"
              :active-value="1"
              :inactive-value="0"
              @change="gitchang('isnew',scope.row)"
              inactive-text="最新">
            </el-switch>
            <el-switch
              style="margin: 20px 0"
              v-model="scope.row.ishot"
              :active-value="1"
              :inactive-value="0"
              @change="gitchang('ishot',scope.row)"
              inactive-text="最热">
            </el-switch>
            <el-switch
              v-model="scope.row.isshow"
              :active-value="1"
              :inactive-value="0"
              @change="gitchang('isshow',scope.row)"
              inactive-text="上架">
            </el-switch>
          </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="180"
          align="center"
          label="价格货号">
          <template slot-scope="scope">
            <div class="text">
              <p class="p1">价格:{{scope.row.price_out}}</p>
              <p class="p2">货号:{{scope.row.pcode}}</p>
              <p class="p2">排序:1</p>

            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="180"
          align="center"
          label="所属分类">
          <template slot-scope="scope">
            {{scope.row.ctitles}}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="180"
          align="center"
          label="查看sku">
          <template slot-scope="scope">

            <i @click="changSku(scope.row.id)" class="sku">修改sku</i>
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          align="center"
          label="原产地">
          <template slot-scope="scope">
          {{scope.row.origin_city}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="addtime"
          width="180"
          label="添加时间">

        </el-table-column>
        <el-table-column
          width="180"
          fixed="right"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" style="margin-bottom: 20px;margin-right: 10px" @click="goEdit(scope.row.id)">编辑商品</el-button>
            <el-button type="danger" size="small" style="margin-left: -10px" @click="delProduct(scope.row.id)">移除商品</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>

<!--  弹出框,sku修改-->
  <div>
    <el-dialog
      title="SKU"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <div>
        <el-table
          :border="true"
          :data="skulist"
          style="width: 100%">
          <el-table-column
            prop="color_text"
            label="颜色"
            align="center"
            width="180">

          </el-table-column>
          <el-table-column
            prop="color"
            label="色值"
            align="center"

            width="180">
          </el-table-column>
          <el-table-column
            width="160"
            align="center"

            label="SKU编码">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sku_code" ></el-input>
          </template>
          </el-table-column>
          <el-table-column
            width="160"
            align="center"

            label="价格">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            align="center"

            label="库存">
            <template slot-scope="scope">
              <el-input v-model="scope.row.count" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"

            label="操作">
    <template slot-scope="scope">
      <span style="color: #409EFF ; padding: 30px 0px" @click="skuSubmit(scope.row)"> 确认修改</span>

    </template>
          </el-table-column>
        </el-table>
      </div>

    </el-dialog>
  </div>
</div>

</template>

<script>

import _ from 'loadsh'
import productApi from "@/api/product/product";
export default {
  name: "productList",

  data() {
    return {
    //商品列表
      productlist:[],
      search:{},
      //绑定值
      value: '',
      value1:'',
      //标签绑定值
      isopen:true,
      isclose:false,
      //sku
      dialogVisible: false,
      skulist:[]
    }

  },
  methods: {
  getList(){

    var params = {
      ...this.search,
      brandId:this.value,
      start:1,
      limit:10
    }

    params = _.pickBy(params, item => item);
    productApi.proList(params)
    .then(res=>{
      console.log(res)
      this.productlist = res.data.list
    })
  },
  doSearch(){
    //搜索
    this.getList()
    this.search={};
    this.value=''

  },
    reselt(){
    // 重置搜索条件
      this.getList()
    },
    //跳转编辑页面
    goAdd(){
      this.$router.push({name: 'productAdd'})
    },
    //删除商品
    delProduct(val){
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        productApi.delProduct({
          id:val
        })
          .then(res=>{
            this.callback(res.code)
            this.getList()
          })

      })


    },
    //改变其中的按钮

    gitchang(val,val1){
      console.log(val)
      console.log(val1)
      if (val == 'isnew'){
        productApi.upwhitchCode({
          id:val1.id,
          isnew:val1.isnew
        })
        .then(res=>{
          this.callback(res.code)
        })
      }else if (val=='ishot'){
        productApi.upwhitchCode({
          id:val1.id,
          ishot:val1.ishot
        })
          .then(res=>{
            this.callback(res.code)
          })
      }else if (val == 'isshow') {
        productApi.upwhitchCode({
          id:val1.id,
          isshow:val1.isshow
        })
          .then(res=>{
            this.callback(res.code)
          })
      }
      // this.getList()
    },
    //获取sku
    changSku(id){
      productApi.skuList({
        productId:id
      })
      .then(res=>{
        console.log(res)
        //打开弹窗
        this.dialogVisible = true
        this.skulist= res.data

      })
    },
    //修改并提交内容
    skuSubmit(val){
      console.log(val)
      productApi.skuUpdata({
        ...val
      })
      .then(res=>{
        console.log(res)
        this.callback(res.code)
      })
    },
    handleClose(done) {
      this.getList()
      this.dialogVisible = false
    },
    //成功回调
     callback(val){
  if (val == 'success'){
    this.$message.success('修改成功!')
  }else {
    this.$message.error('修改失败,请重试!')
  }
},
    //跳转编辑页
    goEdit(id){
      this.$router.push({name: 'productEdit',params:{id:id}})

    }

  },
  created(){
  this.getList()
  },
  computed:{

  }
}
</script>

<style lang="scss" scoped>
.product-list{
  .search{
    width: 95%;
    margin: 0 auto;
    .clearfix{
      font-weight: bold;
    }
    .search-body{
  .inp{
    width: 80%;
  }
      .sele{

      }
    }
  }
  .detail-list{
    width: 95%;
    margin: 0 auto;
    margin-top: 20px;
    ::v-deep.el-table th>.cell{
      text-align: center;
    }
  .text{
    .p1{
      display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
      -webkit-box-orient: vertical; /*值必须为vertical*/
      -webkit-line-clamp: 1; /*值为数字，表示一共显示几行*/
      overflow: hidden;
    }
    .p2{
      display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
      -webkit-box-orient: vertical; /*值必须为vertical*/
      -webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/
      overflow: hidden;
    }
  }
    .switchs{
      width: 300px;
      display: flex;
    }
    .sku{
      font-style:normal;
      color: #1296db;
    }
    .sku::before{
      content: url(~@/assets/icon/chang1.png);
    }
  }
}
</style>
